import React, { Component } from 'react'
import { connect } from 'react-redux'
import SimplePageComponent from '../../components/SimplePageComponent'
import { loadComments } from './actions';
import CommentCell from '../../components/CommentCell'

class CommentList extends Component {


  dispatchLoadComments = (ev, page_number) => {

    ev.preventDefault();
    const { post_id } = this.props;
    console.log("In CommentList out side of Render - page_number: " + page_number);
    this.props.dispatch( loadComments( {page_number, post_id} ) );

  }

  render() {

    // Get from reducer
    const { loaded, loading, pages, page, items } = this.props;
    // Get from Parent Component (GamePostDisplay)
    const { post_id } = this.props;
    // Get from connect method
    const { onLoadComments } = this.props;

    return (
      <div>

        <br/>

        <button className='btn btn-primary'
                  onClick={this.dispatchLoadComments}>
        Click Me to Load Comments</button>

        <div> {items.map(  (item)=>{  
          return <CommentCell commentData = {item} key = {item._id} /> 
        }  )} </div>

        <SimplePageComponent
          toPageFromParent = {this.dispatchLoadComments}
          pages = {pages}
          page = {page} /> 

      </div>
      
    )
  }
}

function mapStateToProps(state, ownProps) {
  const {
    commentList: { loaded, loading, pages, page, items },
  } = state

  return {
    loaded,
    loading,
    pages,
    page,
    items,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    onLoadComments: (e, page_number, post_id) => {
      e.preventDefault();dispatch( loadComments(page_number, post_id) )},
    dispatch,
  };
}

module.exports = connect(mapStateToProps, mapDispatchToProps)(CommentList)